<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>

<th:block th:fragment="header">
    <link rel="stylesheet" href="/css/header.css">

    <!-- 顶部导航栏 -->
    <div class="top-header fixed top-0 w-full h-[60px] flex items-center justify-between" id="header_app" v-cloak>
        <div class="header-brand">YUMO.AI</div>
        <div class="px-4 flex item-center justify-end">
            <el-dropdown @command="handleCommand">
                <div class="text-right">
                    <div class="user-name">{{userInfo.userName}}</div>
                    <div class="user-phone">{{userInfo.userPhone}}</div>
                </div>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>

        <script>
            var vue_header_app = new Vue({
                el: '#header_app',
                data: {
                    userInfo: {}
                },
                created: function () {
                    this.userInfo = JSON.parse(window.localStorage.getItem('yumoAiAdmin:userInfo') || '{}')
                },
                methods: {
                    handleCommand: function (command) {
                        switch (command) {
                            case 'logout':
                                this.handleLogout()
                                break;
                        }
                    },
                    handleLogout: function () {
                        if (confirm('确定退出登录？')) {
                            api_logout({}, function (res) {
                                this.$message.success('退出登录成功');
                                window.location.href = '/login';
                            }.bind(this))
                        }
                    }
                }
            })
        </script>
    </div>

</th:block>

</body>
</html>